<template>
  <div class="login">
    <div class="login-container">
      <h1>后台管理系统</h1>
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="账号登录" name="account">
          <account-form ref="accountFormRef"></account-form>
        </el-tab-pane>
        <el-tab-pane label="手机登录" name="phone">
          <account-form></account-form>
        </el-tab-pane>
      </el-tabs>
      <div class="choose">
        <el-checkbox v-model="isRemember" label="记住密码" size="small" />
        <el-link type="danger">忘记密码</el-link>
      </div>
      <el-button type="primary" round class="login-in" @click="loginAccount"
        >点击登录</el-button
      >
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

import AccountForm from "./cpns/account-form.vue";
export default defineComponent({
  components: {
    AccountForm
  },
  setup() {
    const activeTab = ref("account");
    const accountFormRef = ref<InstanceType<typeof AccountForm>>();
    const isRemember = ref(false);

    const loginAccount = () => {
      accountFormRef?.value?.submitForm(isRemember.value);
    };
    return {
      accountFormRef,
      activeTab,
      isRemember,
      loginAccount
    };
  }
});
</script>
<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-image: url("~@/assets/image/login_bg.jpeg");
}
.login-container {
  width: 300px;
  padding: 24px;
  position: absolute;
  right: 18%;
  top: 240px;
  background-color: rgba(#fff, 0.1);
  text-align: center;
  h1 {
    text-align: center;
    margin-bottom: 24px;
    background: linear-gradient(270deg, #6ee91499, #3094c6);
  }
  /deep/.el-tabs.el-tabs--card {
    > .el-tabs__header {
      width: 195px;
      margin: 0 auto 20px;
    }
  }
  .choose {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/.el-link__inner {
      font-size: 12px;
    }
  }
  .login-in {
    width: 220px;
    height: 40px;
    margin-top: 15px;
  }
}
</style>
